//获取元素节点
function test1(){
    //getElementById根据id属性获取指定单个元素
    var md = document.getElementById("mydiv1");
    console.log(md);

    //getElementsByName根据name属性获取多个元素，返回数组
    var arr1 = document.getElementsByName('ah');
    console.log(arr1);

    //getElementsByClassName根据class属性获取多个元素，返回数组
    var arr2 = document.getElementsByClassName("sty1");
    console.log(arr2);

    //getElementsByTagName根据标签名获取多个元素，返回数组
    var arr3 = document.getElementsByTagName("li");
    console.log(arr3);

    //querySelector根据任意选择器名获取第一个元素
    var node = document.querySelector("#mydiv1");
    console.log(node);

    //querySelectorAll根据任意选择器名获取多个元素，返回数组
    var nodes = document.querySelectorAll("li");
    console.log(nodes);
}

//获取属性节点
function test2(){
    var zhi = document.getElementById("range").getAttribute("abc");
    console.log(zhi);
    
    var arr = document.getElementById("range").getAttributeNames();
    console.log(arr);

    var attrNode = document.getElementById("range").getAttributeNode("step");
    console.log(attrNode);

    console.log(document.getElementById("range").abc);

}

//获取文本节点
function test3(){
    var info = document.getElementById("mydiv1").innerText;
    console.log(info);
    var info2 = document.getElementById("mydiv1").innerHTML;
    console.log(info2);
}

//获取一级父元素节点
function test4(){
    var fu = document.getElementById("s1").parentNode.parentNode;
    console.log(fu);
}

//获取子节点
function test5(){
    var fu = document.getElementById("div1");
    var zi = fu.childNodes;
    // for(var i=0; i<zi.length; i++){
    //     console.log(zi[i].nodeName);
    //     // if(zi[i].nodeType == 1){//元素节点
    //     //     console.log(zi[i].nodeName)
    //     //     console.log(zi[i].nodeValue)
    //     // }
    // }
    console.log(zi[3].childNodes[1].innerText);
    var ysZi = fu.children;
    // for(var i=0; i<ysZi.length; i++){
    //     console.log(ysZi[i]);
    // }
    console.log(ysZi[0].children[0].innerText);
}

//获取第一个/最后一个子节点
function test6(){
    var fu = document.getElementById("div1");
    console.log(fu.firstChild);
    console.log(fu.firstElementChild);
    console.log(fu.lastChild);
    console.log(fu.lastElementChild);
}

//获取同辈节点
function test7(){
    var cz = document.getElementById("p1");
    console.log(cz.nextSibling);
    console.log(cz.nextElementSibling);
    console.log(cz.previousSibling);
    console.log(cz.previousElementSibling);
}

//创建元素节点
function test8(){
    //创建
    var pNode = document.createElement("p");//  <p></p>
    console.log(pNode);
    //拷贝
    var cNode = document.getElementById("mydiv1").cloneNode(true);
    console.log(cNode);
}

//新增元素节点
function test9(){
    //创建li节点
    var li = document.createElement("li");
    li.innerText = "新项";
    //新增节点
    var fu = document.getElementById("ul1")
    //fu.appendChild(li);

    //参照节点
    var cz = document.getElementById("er");
    fu.insertBefore(li,cz);
}

//新增属性节点
function test10(){
    var pNode = document.createElement("a");
    //添加属性
    //pNode.setAttribute("href","www.baidu.com");
    pNode.href = "www.baidu.com";

    console.log(pNode.getAttribute("href"));
    console.log(pNode.href);
}

//修改[替换]元素节点
function test11(){
    //父节点
    var fu = document.getElementById("ul1");
    //老节点
    var oldLi = document.getElementById("ul1").firstElementChild;
    //新节点
    var newLi = document.createElement("li");
    newLi.innerText = "新项";

    fu.replaceChild(newLi, oldLi);
}

//删除元素节点
function test12(){
    if(confirm("确认删除吗？")){
        //父节点
        var fu = document.getElementById("ul1");
        //待删除节点
        var sc = document.getElementById("er");

        //fu.removeChild(sc);
        //sc.remove()
    }
}

//删除属性节点
function test13(){
    var xx = document.getElementById("er");
    xx.removeAttribute("style");
    console.log(xx.getAttribute("style"));
}

//设置样式
function test14(){
    document.getElementById("div2").style.color="purple";
    document.getElementById("div2").style.fontSize="26px";

    //document.getElementById("div2").className="mySty";
}

//获取样式
function test15(){
    //console.log(document.getElementById("div2").style.fontSize);
    //console.log(document.defaultView.getComputedStyle(document.getElementById("div2"),null).fontSize);
    console.log(document.getElementById("div2").currentStyle.fontSize);
}

//清除样式
function test16(){
    document.getElementById("div2").style.color="";
}